<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="/static/qiniu/assets/img/favicon.png">

    <title>croppic</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/qiniu/assets/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/qiniu/assets/css/main.css" rel="stylesheet">
    <link href="/static/qiniu/assets/css/croppic.css" rel="stylesheet">

</head>

<body>
<form action="http://up.qiniu.com" method="post"  name="form" id="form" >
    <div class="wk">
        <div id="cropContainerModal">
            <div style="background:url(/static/qiniu/temp/floarlartv3.jpg) center center no-repeat #fff; width:300px; height:300px;"></div>
        </div></div>

    <input type="text" id="wedOutput" name="headimg" style="display:none"/>
    <input name="token" type="hidden" value="{$upToken}">
    <input type="submit" name="Submit" id="Submit" value="保存头像">
</form>




<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> -->
<script src="/static/qiniu/assets/js/jquery.min.js"></script>

<script src="/static/qiniu/assets/js/bootstrap.min.js"></script>
<script src="/static/qiniu/assets/js/jquery.mousewheel.min.js"></script>
<script src="/static/qiniu/croppic.js"></script>
<script src="/static/qiniu/assets/js/main.js"></script>
<script>

    var croppicContainerModalOptions = {
        uploadUrl:'/static/qiniu/img_save_to_file.php',
        cropUrl:'/static/qiniu/img_crop_to_file.php',
        outputUrlId:'wedOutput',
        modal:true,
        imgEyecandyOpacity:0.4,
        loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
        onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
        onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
        onImgDrag: function(){ console.log('onImgDrag') },
        onImgZoom: function(){ console.log('onImgZoom') },
        onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
        onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
        onReset:function(){ console.log('onReset') },
        onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);


</script>
</body>
</html>
